<template>
  <div>
    <div class="eyse2"><p>客户信息</p></div>
    <div class="eyse3">
      <span
        ><el-icon><DArrowLeft /></el-icon
      ></span>
      <span @click="funnn()" v-for="(v, i) in arr" :key="i">{{ v.tetle }}</span>
      <span
        ><el-icon><DArrowRight /></el-icon
      ></span>
    </div>

    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span>Route</span>
          </span>
        </template>
        Route
      </el-tab-pane>
      <el-tab-pane label="Config"> </el-tab-pane>
      <el-tab-pane label="Role">Role</el-tab-pane>
      <el-tab-pane label="Task">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { Calendar } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
let router = useRouter();

let fun = () => {};
let funn = () => {
  router.go(-1);
};
let funnn = () => {
  router.push("/views/extension/Fuzhai");
};
let value = ref("");
let arr = [
  {
    tetle: "基本信息",
  },
  {
    tetle: "资产负债表",
  },
  {
    tetle: "利润表",
  },
  {
    tetle: "现金流量表",
  },
  {
    tetle: "股东信息",
  },
  {
    tetle: "管理团队",
  },
  {
    tetle: "银行账户信息",
  },
  {
    tetle: "企业信用概况",
  },
  {
    tetle: "涉诉信息",
  },
];
</script>
<style scoped>
.eyse1 {
  width: 100%;
  height: 100%;
}
.eyse3 {
  width: 100%;
  height: 50px;
  /* background: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eyse3 span:hover {
  cursor: pointer;
  background: skyblue;
  color: aliceblue;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>